<template>
    <!-- 页面暂不使用 -->
    <div style="height: 100%">
        <div class="header-select">
            <ul class="header-select-list clearfix">
                <router-link tag="li" to="/search" class="icon-box-01"><i class="icon-search"></i></router-link>
            </ul>
        </div>
        <div style="height: 100%;">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <div style="height: 100%;overflow: auto;">
                    <!--最新发布课程-->
                    <div class="elevtive-Newcontent bottom-shadow" v-if="freshCourseItem.length > 0">
                        <van-cell-group>
                            <van-cell :title="$t('latest_release_course')" is-link :to="{path: '/courseLeaderboard', query: {sortname: 'itmPublishTime', type: 'new'}}" />
                        </van-cell-group>
                        <div class="white-bg">
                            <div class="scroller-x">
                                <div class="box1" :style="{width: (240 * (freshCourseItem.length > 5 ? 5 : freshCourseItem.length)) + 'px'}">
                                    <div class="box1-item" v-for="(item, index) in freshCourseItem" :key="item.itmId" @click="detailsJump(item.itmId, item.itmType)" v-if="index < 5">
                                        <div class="box1-item-img" v-if="item.itmIcon">
                                            <img :src="appUrl + item.itmIcon" alt="" width="100%" height="100%"/>
                                            <div>
                                            <span><i class="people-num-icon-02"></i>{{ item.totalLearner}}</span> <!--原本为点赞人数，接口没有返回，暂改为评分-->
                                            <!-- <span><i class="like-icon-02"></i>{{ item.courseScore }}</span> -->
                                            </div>
                                        </div>
                                        <div class="box1-item-title"><i class="public-mobile-icon"></i>{{ item.itmTitle }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--学习人数最多的课程-->
                    <div class="elevtive-Newcontent margin-top10 bottom-shadow" v-if="freshCourseList.length > 0">
                        <van-cell-group>
                            <van-cell :title="$t('most_studied_course')" is-link :to="{path: '/courseLeaderboard', query: {sortname: 'learner', type: 'learner'}}" />
                        </van-cell-group>
                        <div class="white-bg">
                            <div class="scroller-x">
                                <div class="box1" :style="{width: (240 * (freshCourseList.length > 5 ? 5 : freshCourseList.length)) + 'px'}">
                                    <div class="box1-item" v-for="(item, index) in freshCourseList" :key="item.itmId" @click="detailsJump(item.itmId, item.itmType,item.itmTitle)" v-if="index < 5">
                                        <div class="box1-item-img" v-if="item.itmIcon">
                                            <img :src="appUrl + item.itmIcon" alt="" width="100%" height="100%"/>
                                            <div>
                                                <span><i class="people-num-icon-02"></i>{{ item.totalLearner}}</span> <!--原本为点赞人数，接口没有返回，暂改为评分-->
                                                <!-- <span><i class="like-icon-02"></i>{{ item.courseScore }}</span> -->
                                            </div>
                                        </div>
                                        <div class="box1-item-title"><i class="public-mobile-icon"></i>{{ item.itmTitle }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--课程目录-->
                    <div class="elevtive-list bottom-shadow margin-top10" v-if="freshCatalogList.length > 0">
                        <div class="elevtive-list-header" style="padding: 15px 0 15px 15px;">
                            {{ $t("menu_course_catalog") }}
                        </div>

                        <van-cell-group>
                            <van-cell :title="item.name" :label="$t('course_sub_catalog', {'value': item.childResourcesCount})" is-link :to="`/filterDirectory/${item.id}/course`"  v-for="item in freshCatalogList" :key="item.id"/>
                        </van-cell-group>
                    </div>
                    <!--暂无数据-->
                    <div v-if="!isLoading && freshCourseItem.length === 0 && freshCourseList.length === 0 && freshCatalogList.length === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t("no_data") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <common-loading :isLoading="isLoading"></common-loading>
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
export default {
    name: 'ElectiveCenter',
    components: {
        CommonLoading
    },
    data() {
        return {
            //   aeTreeNodeVoList: [],
            //   courseItem: [], //最新课程
            //   courseList: [], //学习人数最多
            freshCourseItem: [], // 新接口 --最新课程
            freshCourseList: [], // 新接口 --最多人学习
            freshCatalogList: [], //新接口 --顶层目录
            isLoading: true,
            isRefresh: false
        };
    },
    methods: {
        detailsJump(id, type, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        init() {
            // this.$axios({
            //     type: 'GET',
            //     url: '/app/catalog/mobileJson',
            //     params: {
            //         cos_type: 'course',
            //         tndId: 0
            //     }
            // }).then(res => {
            //
            //     this.aeTreeNodeVoList = res.data.catalog.first;
            //     this.isLoading = false;
            // });
            // this.$axios({ //最新课程
            //     method: 'GET',
            //     url: '/app/rank/course_rank',
            //     params: {
            //         showMobileOnly: true,
            //         sortorder: 'desc',
            //         sortname: 'itm_publish_timestamp'
            //     }
            // }).then(res => {
            //
            //     this.courseItem = res.data.rows;
            //     this.isTop = true;
            //     this.isLoading = false;
            // });
            // this.$axios({ //学习人数最多
            //     method: 'GET',
            //     url: '/app/rank/course_rank',
            //     params: {
            //         showMobileOnly: true,
            //         sortorder: 'desc',
            //         sortname: '\'app.app_total\''
            //     }
            // }).then(res => {
            //
            //     this.courseList = res.data.rows;
            //     this.isLoading = false;
            // });
            /*@不虎 请求新的选课列表-- 学习人数最多倒序*/
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/center/list`,
                params: {
                    pageNo: 1,
                    pageSize: 5
                },
                data: {
                    endTime: '',
                    isCompulsory: false,
                    isExamInd: false,
                    isMobileInd: true,
                    isOpenCourse: false,
                    isPeriods: false,
                    order: 'learner', // 人数筛选
                    searchText: '',
                    sort: 'RISE', // 排序规则
                    startTime: '',
                    tip: 0
                }
            }).then(res => {
                this.freshCourseList = res.data.results;
                this.isLoading = false;
            });
            /*@不虎 请求新的选课列表-- 最新发布倒序*/
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/center/list`,
                params: {
                    pageNo: 1,
                    pageSize: 5
                },
                data: {
                    endTime: '',
                    isCompulsory: false,
                    isExamInd: false,
                    isMobileInd: true,
                    isOpenCourse: false,
                    isPeriods: false,
                    searchText: '',
                    sort: 'RISE', // 排序规则
                    startTime: '',
                    tip: 0
                }
            }).then(res => {
                this.freshCourseItem = res.data.results;
                this.isLoading = false;
            });
            /*@不虎 请求目录数据--*/
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/tree/course/catalog`,
                params: {
                    parentType: 'TOP'
                }
            }).then(res => {
                let temp = res.data;
                temp.forEach((item) => {
                    item.childNumber = item.children ? item.children.length : 0;
                });
                this.freshCatalogList = temp;
                this.isLoading = false;
            });
        },

        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.init();
                this.isRefresh = false;
            }, 900);
        }
    },
    mounted() {
        this.init();
    },
    activated() {
    }
};
</script>

<style scoped>
.box1 {
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.scroller-x{
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}
.scroller-x::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}
</style>
